<html data-framework="angularjs">
<head>
  <title>AngularJS Internalization</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="mymodal">
  <div class="container" ng-controller="MainCtrl">
    <h1>Modal example &times;</h1>
    <button class="btn btn-default" ng-click="toggleModal()">Open modal</button>
    
    <modal title="Login form" visible="showModal">
      <form role="form">
        <div class="form-group">
          <label for="email">Email address</label>
          <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <button class="btn btn-default">Submit</button>
      </form>
    </modal>
  </div>
  <script>
    var mymodal = angular.module('mymodal', []);
    
    mymodal.controller('MainCtrl', function($scope){
      $scope.showModal = false;
      $scope.toggleModal = function(){
        $scope.showModal = !$scope.showModal;
      };
    });
    
    mymodal.directive('modal', function(){
      return {
        template: '<div class="modal fade">' +
            '<div class="modal-dialog">' +
              '<div class="modal-content">' +
                '<div class="modal-header">' +
                  '<button class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                  '<h4 class="modal-title">{{ title }}</h4>' +
                '</div>' +
                '<div class="modal-body" ng-transclude></div>' +
              '</div>' +
            '</div>' +
          '</div>',
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: true,
        link: function postLink(scope, element, attrs){
          scope.title = attrs.title;
          
          scope.$watch(attrs.visible, function(value){
            if (value == true) {
              $(element).modal('show');
            } else {
              $(element).modal('hide');
            }
          });
          
          $(element).on('shown.bs.modal', function(){
            scope.$apply(function(){
              scope.$parent[attrs.visible] = true;
            });
          });
          
          $(element).on('hidden.bs.modal', function(){
            scope.$apply(function(){
              scope.$parent[attrs.visible] = false;
            });
          });
        }
      }
    })
  </script>
</body>
</html>